<template>
  <el-card v-loading.fullscreen.lock="loading">
    <div slot="header" class="clearfix relative">
      <span class="title-icon">基本信息</span>
      <el-button
        v-if="isEdit && verifyShow.waybInfoEdit"
        type="success"
        size="mini"
        class="header-save-btn"
        @click="changeBasicInfo"
      >
        保存
      </el-button>
    </div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      size="mini"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="customer" label="公司简称：" v-if="isCreate">
            <el-autocomplete
              v-model="ruleForm.customer"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入内容"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
          <el-row :gutter="10" v-else>
            <el-col :span="12">
              <el-form-item prop="returnCountry" label="公司简称：">
                <span>{{ customerAll[ruleForm.customerId] }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="returnCountry" label="公司编码：">
                <span>{{ customerCodeMap[ruleForm.customerId] }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item prop="masterNo" label="主单号：">
                <el-input v-model="ruleForm.masterNo" type="text" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="recipients" label="签收人：">
                <el-input v-model="ruleForm.recipients" type="text" clearable />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item prop="shippingWay" label="业务类型：">
            <el-radio-group
              v-model="ruleForm.shippingWay"
              :disabled="isCreate ? false : true"
            >
              <el-radio label="TH">退货</el-radio>
              <el-radio label="HWC">中转</el-radio>
              <el-radio label="OT">其他</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item prop="serviceItemArr" label="服务项目：">
            <el-checkbox-group v-model="ruleForm.serviceItemArr">
              <el-checkbox
                v-for="(item, value) in serviceItemMap"
                :key="value"
                :label="value"
                name="specialProduct"
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="returnCountry" label="退货国家：">
            <el-select
              filterable
              v-model="ruleForm.returnCountry"
              placeholder="请选择退货国家"
            >
              <el-option
                v-for="(item, value) in countryMap"
                :key="value"
                :label="item"
                :value="parseInt(value)"
              />
            </el-select>
          </el-form-item>

          <el-form-item prop="estimatedInStorageTime" label="预计入仓时间：">
            <el-date-picker
              v-model="ruleForm.estimatedInStorageTime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            prop="abroadAddress"
            label="签收地址："
            v-if="!isCreate"
          >
            <el-select
              filterable
              v-model="ruleForm.abroadAddress"
              placeholder="请选择签收地址"
            >
              <el-option
                v-for="(item, value) in abroadStockAddressSource"
                :key="value"
                :label="item"
                :value="parseInt(value)"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="customerRemark" label="运单备注：">
            <el-input v-model="ruleForm.customerRemark" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";

export default {
  name: "BasicInfo",
  components: {},
  props: {
    customerAll: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    verifyShow: {
      type: Object,
      default: function() {
        return {};
      }
    },
    customerCodeMap: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    customerPermissionsMap: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    countryMap: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    serviceItemMap: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    waybillInfo: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    abroadStockAddressSource: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    isCreate: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    waybillInfo: {
      handler(newValue, oldValue) {
        console.log("newValue :>> ", newValue);
        if (Object.keys(newValue).length > 0) {
          this.ruleForm = newValue;
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      loading: false,
      waybillId: "",
      value1: "",
      timerL: null,
      ruleForm: {
        customer: "",
        returnCountry: "",
        serviceItemArr: [],
        serviceItem: "",
        shippingWay: "",
        customerRemark: "",
        estimatedInStorageTime: ""
      },
      rules: {
        customer: [
          { required: true, message: "请选择公司简称", trigger: "change" }
        ],
        returnCountry: [
          { required: true, message: "请选择退货国家", trigger: "change" }
        ],
        serviceItemArr: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个服务项目",
            trigger: "change"
          }
        ],
        shippingWay: [
          { required: true, message: "请选择业务类型", trigger: "change" }
        ],
        customerRemark: [
          { required: false, message: "请填写活动形式", trigger: "blur" }
        ],
        estimatedInStorageTime: [
          { required: false, message: "请选择预计入仓时间", trigger: "change" }
        ]
      }
    };
  },
  mounted() {
    console.log("this.customerAll :>> ", this.customerAll);
    console.log(
      "this.customerAll[this.ruleForm.customerId] :>> ",
      this.customerAll[this.ruleForm.customerId]
    );
  },
  methods: {
    changeBasicInfo() {
      this.saveInfo();
    },
    async saveInfo() {
      this.waybillInfo.serviceItem = this.waybillInfo.serviceItemArr.join(",");
      this.loading = true;
      const { code, message } = await ajax("saveAbroadWaybill", this.ruleForm);
      this.loading = false;
      if (code === 200) {
        this.$message({
          type: "success",
          message: "保存成功"
        });
      } else {
        this.$message.error(message);
      }
    },
    changeFn(val) {
      console.log("val :>> ", val);
    },
    changeSearch() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {}, 1000);
    },
    querySearchAsync(queryString, cb) {
      if (!queryString) return;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        const results = queryString ? this.createStateFilter(queryString) : "";
        cb(results);
      }, 1000);
    },
    createStateFilter(queryString) {
      let t = [];

      for (let key in this.customerPermissionsMap) {
        if (
          this.customerPermissionsMap[key] &&
          this.customerPermissionsMap[key].indexOf(queryString) > -1
        ) {
          t.push({
            value: this.customerPermissionsMap[key],
            id: key
          });
        }
      }

      return t;
    },
    handleSelect(item) {
      console.log(item);
      this.ruleForm.customerId = item.id;
    }
  }
};
</script>

<style lang="scss" scoped>
.relative {
  .absolute {
    right: 10px;
    top: -40%;
  }
}

.el-select,
.el-input,
.el-autocomplete,
.el-textarea {
  width: 100%;
}
</style>
